<
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <style>
        .el-row {
            margin-bottom: 20px;

        }
    </style>
</head>
<body>
<div id="app">
    <template>
        <el-table
                :data="listData"
                border
                style="width: 100%">
            <el-table-column
                    v-if="show"
                    prop="id"
                    label="id"
                    width="600">
            </el-table-column>
            <el-table-column
                    fixed
                    prop="name"
                    label="名字"
                    width="600">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址"
                    width="600">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="电话"
                    width="700">
            </el-table-column>

            <el-table-column
                    label="操作"
                    width="600">
                <template slot-scope="scope">
                    <el-button @click="updateClick(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="deleteClick(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>

    <el-dialog
            title="提示"
            :visible.sync="updateDialog"
            width="30%"
            height="60%"
            center>
        <el-input
                v-if="never"
                width="30%"
                placeholder="请输入内容"
                prefix-icon="el-icon-search"
                v-model="update_id">
        </el-input>
        <el-row >
            <el-col :span="4">姓名：</el-col>
            <el-col :span="18"><el-input
                    width="30%"
                    placeholder="请输入内容"
                    prefix-icon="el-icon-search"
                    v-model="update_name">
            </el-input></el-col>
        </el-row>
        <el-row>
            <el-col :span="4">电话：</el-col>
            <el-col :span="18"><el-input
                    width="30%"
                    placeholder="请输入内容"
                    prefix-icon="el-icon-search"
                    v-model="update_phone">
            </el-input></el-col>
        </el-row>
        <el-row>
            <el-col :span="4">地址：</el-col>
            <el-col :span="18"><el-input
                    width="30%"
                    placeholder="请输入内容"
                    prefix-icon="el-icon-search"
                    v-model="update_address">
            </el-input></el-col>
        </el-row>
        <span slot="footer" class="dialog-footer">
<el-input
        v-if="deleteIdVisible"
        width="30%"
        placeholder="请输入内容"
        prefix-icon="el-icon-search"
        v-model="delete_id">
        </el-input>
    <el-button type="primary" @click="updateSubmit()">提交</el-button>
            <el-button @click="updateDialog = false">取 消</el-button>
  </span>
    </el-dialog>

    <el-dialog
            title="提示"
            :visible.sync="deleteVisible"
            width="30%"
            center>
        <span>是否需要删除该条数据</span>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="deleteSubmit()">确 定</el-button>
    <el-button @click="deleteVisible = false">取 消</el-button>

  </span>
    </el-dialog>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        methods: {
            deleteSubmit(){
                var _self = this;
                console.log(_self)
                $.ajax({
                    url: '/resume/resumes/'+_self.delete_id,
                    type: 'DELETE',    //GET

                    async: false,

                    timeout: 5000,    //³¬Ê±Ê±¼ä
                    dataType: 'json', //·µ»ØµÄÊý¾Ý¸ñÊ½£ºjson/xml/html/script/jsonp/text
                    success: function (data) {
                        _self.listData = data.data;
                        _self.deleteVisible = false;
                        _self.$message({
                            message: '删除成功',
                            type: 'success'
                        });

                    }
                });
            },
            updateSubmit(){
                var _self = this;
                console.log(_self)
                $.ajax({
                    url: '/resume/resumes',
                    type: 'PUT',    //GET
                    contentType: 'application/json',
                    data: JSON.stringify({id: _self.update_id, name: _self.update_name, address: _self.update_address, phone:  _self.update_phone}),
                    async: false,

                    timeout: 5000,    //³¬Ê±Ê±¼ä
                    dataType: 'json', //·µ»ØµÄÊý¾Ý¸ñÊ½£ºjson/xml/html/script/jsonp/text
                    success: function (data) {
                        _self.listData = data.data
                        _self.updateDialog = false;
                        _self.$message({
                            message: '更新成功',
                            type: 'success'
                        });

                    }
                });
            },
            updateClick(row) {
                console.log(row);
                var _self = this;
                _self.updateDialog = true;
                _self.update_id = row.id;
                _self.update_name = row.name;
                _self.update_phone = row.phone;
                _self.update_address = row.address;

            }, deleteClick(row) {
                var _self = this;
                _self.deleteVisible = true;
                _self.delete_id = row.id;

            }
        },

        data() {

            return {
                show: false,
                updateDialog: false,
                deleteIdVisible: false,
                deleteVisible: false,
                never: false,
                update_name: '',
                update_phone: '',
                update_address: '',
                listData: [{}]
            }
        },
        created: function () {
            var _self = this;
            $.ajax({
                url: '/resume/resumes',
                type: 'GET',    //GET
                async: false,    //»òfalse,ÊÇ·ñÒì²½

                timeout: 5000,    //³¬Ê±Ê±¼ä
                dataType: 'json', //·µ»ØµÄÊý¾Ý¸ñÊ½£ºjson/xml/html/script/jsonp/text
                success: function (data) {
                    _self.listData = data.data


                }
            });


        }
    })
</script>
</html>